<template>
    <p>生命周期</p>
</template>

<script>
import {
    onBeforeMount,
    onMounted,

    onBeforeUpdate,
    onUpdated,

    onBeforeUnmount,
    onUnmounted
} from "vue"

export default {
    name: "LifeCycle",

    props: {
        date: String
    },

    /* 执行在创建阶段：功能上等同于Vue2的beforeCreate + created */
    setup(props, context) {
        console.log("setup",props,context);

        /* 挂载之前回调内部的函数 */
        onBeforeMount(
            () => console.log("onBeforeMount")
        )

        onMounted(
            () => console.log("onMounted")
        )

        onBeforeUpdate(
            () => console.log("onBeforeUpdate")
        )

        onUpdated(
            () => console.log("onUpdated")
        )

        onBeforeUnmount(
            () => console.log("onBeforeUnmount")
        )

        onUnmounted(
            () => console.log("onUnmounted")
        )
    },

    /* Vue2完整生命周期 */
    // beforeCreate() {
    //     console.log("beforeCreate");
    // },
    // created() {
    //     console.log("created");
    // },

    // beforeMount() {
    //     console.log("beforeMount");
    // },
    // mounted() {
    //     console.log("mounted");
    // },

    // beforeUpdate() {
    //     console.log("beforeUpdate");
    // },
    // updated() {
    //     console.log("updated");
    // },

    // beforeUnmount() {
    //     console.log("beforeUnmount");
    // },
    // unmounted() {
    //     console.log("unmounted");
    // },

}
</script>